// 图片和文字的切换
$(function(){
    var result = window.matchMedia('(max-width:768px)');
    if(result.matches){
        let row=document.getElementsByClassName("nextrow");
        for(let i=0;i<row.length;i++){

            let rowlast=row[i].removeChild(row[i].lastElementChild);
            row[i].insertBefore(rowlast,row[i].firstChild)
        }

    }
})





$(".thefont li").click(function () {
    $(this).parent().parent().find("ul").find("li").removeClass("pink");
    $(this).addClass("pink");
})






$.ajax({
    url:"js/goods.json",
    // http://www.shouziliu.com/qiuzhen/good/
    type:"get",
    success:function (good) {
        var n=0;//涉及到分页按钮
        var qz=0;//生成按钮个数
        var sxsz;//接收点击出来的数组


        // 点击全部

        function quanbu() {

            n=0;
            $(".goods").html("");
            $("#navula").html("")
            let b=good.goods;



            // $.each(b,function (index,shop){
            //    $(`<div class="col-xs-6  col-md-4 ">
            //     <img src="img/delicacy-img/${shop.img}" width="100%" alt="">
            //     <h3>${shop.name}</h3>
            //     <p class="p1">${shop.content}</p>
            // </div>`).appendTo('.goods')
            //
            // })
             qz=Math.ceil(b.length/6);
             sxsz=good.goods;

            for(let i=0;i<qz;i++){//按钮个数生成
                $(`<li>${i+1}</li>`).appendTo("#navula");
            }

            $("#navula li:nth-child(1)").addClass("bgpk");


            for(let j=0;j<6;j++){
                $(`<div class="col-xs-6  col-md-4 ">
                 <img src="img/delicacy-img/${b[j].img}" width="100%" alt="">
                 <h3>${b[j].name}</h3>
                 <p class="p1">${b[j].content}</p>
                 </div>`).appendTo('.goods')
            }
            sxsz=b;

        }
        quanbu()







//点击 上面商品里的 按钮li

        $(".kinds li").on("click",function (e) {
            // console.log($(this).attr("data-kinds"));
            // console.log($(e.target).index());

            if($(e.target).index()==1){
                quanbu()
            }else if($(e.target).index()>1){
                n=0;
                $(".goods").html("");
                $("#navula").html("");

                let a=good.goods;
                // console.log(a);
                let b=[];
                for(let i=0;i<a.length;i++){

                    if(a[i].kinds==$(this).attr("data-kinds")){
                        b.push(a[i])
                    }
                }

                sxsz=b;
                qz=Math.ceil(b.length/6);
                for(let i=0;i<qz;i++){
                    $(`<li>${i+1}</li>`).appendTo("#navula");
                }

                $("#navula li:nth-child(1)").addClass("bgpk")
                // $.each(b,function (index,shop){
                //     $(`<div class="col-xs-6  col-md-4 ">
                //     <img src="img/delicacy-img/${shop.img}" width="100%" alt="">
                //     <h3>${shop.name}</h3>
                //     <p class="p1">${shop.content}</p>
                // </div>`).appendTo('.goods')
                // })
                for(let i=0;i<6;i++){
                    $(`<div class="col-xs-6  col-md-4 ">
                 <img src="img/delicacy-img/${b[i].img}" width="100%" alt="">
                 <h3>${b[i].name}</h3>
                 <p class="p1">${b[i].content}</p>
                 </div>`).appendTo('.goods')
                }

            }






        })

        //点击口味里面的li

        // $(".kinds li:nth-of-type(1)").click(function () {
        //
        //     quanbu()
        // })


        $(".taste li").click(function () {
            // console.log($(this).attr("data-kinds"));
            $(".goods").html("");
            $("#navula").html("")
            n=0;
            let a=good.goods;
            // console.log(a);
            let b=[];
            num=b.length;
            for(let i=0;i<a.length;i++){
                if(a[i].taste==$(this).attr("data-kinds")){
                    b.push(a[i])
                }
            }

            sxsz=b;
            qz=Math.ceil(b.length/6);
            for(let i=0;i<qz;i++){
                $(`<li>${i+1}</li>`).appendTo("#navula");
            }
            $("#navula li:nth-child(1)").addClass("bgpk")
            // $.each(b,function (index,shop){
            //     $(`<div class="col-xs-6  col-md-4 ">
            //     <img src="img/delicacy-img/${shop.img}" width="100%" alt="">
            //     <h3>${shop.name}</h3>
            //     <p class="p1">${shop.content}</p>
            // </div>`).appendTo('.goods')
            // })
            for(let i=0;i<6;i++){
                $(`<div class="col-xs-6  col-md-4 ">
                 <img src="img/delicacy-img/${b[i].img}" width="100%" alt="">
                 <h3>${b[i].name}</h3>
                 <p class="p1">${b[i].content}</p>
                 </div>`).appendTo('.goods')
            }

        })

//遍历下面的页码

        // $("#navula li:nth-child(1)").addClass("bgpk")
        // $("#navula li").click(function () {
        //     $(this).addClass("bgpk").siblings().removeClass("bgpk")
        // })


        $("#navula").on("click",function (e) {
            $(".goods").html("");

            let b=sxsz;
            n = $(e.target).index();
            $(e.target).addClass("bgpk").siblings().removeClass("bgpk")

            $("#navula").removeClass("bgpk");

            for(let i=n*6;i<(n+1)*6;i++){
                $(`<div class="col-xs-6  col-md-4 ">
                 <img src="img/delicacy-img/${b[i].img}" width="100%" alt="">
                 <h3>${b[i].name}</h3>
                 <p class="p1">${b[i].content}</p>
                 </div>`).appendTo('.goods')
            }





        })

        //按上一页按钮
        $(".pre-v").click(function () {
            prev();
        })
        // 按下一页按钮

        $(".next-v").click(function () {
            next();
        })



        function prev(){
            $(".goods").html("");
            n--;
            let b=sxsz;
            if(n<=0){
                n=0;
            }
            $("#navula li").eq(n).addClass("bgpk").siblings().removeClass("bgpk")


            for(let i=n*6;i<(n+1)*6;i++){
                $(`<div class="col-xs-6  col-md-4 ">
                 <img src="img/delicacy-img/${b[i].img}" width="100%" alt="">
                 <h3>${b[i].name}</h3>
                 <p class="p1">${b[i].content}</p>
                 </div>`).appendTo('.goods')
            }



        }



        function next(){
            $(".goods").html("");
            n++;

            let b=sxsz;
            if(n>qz-1){
                n=qz-1;
            }

            $("#navula li").eq(n).addClass("bgpk").siblings().removeClass("bgpk")

            for(let i=n*6;i<(n+1)*6;i++){
                $(`<div class="col-xs-6  col-md-4 ">
                 <img src="img/delicacy-img/${b[i].img}" width="100%" alt="">
                 <h3>${b[i].name}</h3>
                 <p class="p1">${b[i].content}</p>
                 </div>`).appendTo('.goods')
            }



        }
    }




})



















